import React, {Component} from 'react';
import {observer, inject} from 'mobx-react';
import {Link, withRouter} from 'react-router-dom';
import cssModules from 'react-css-modules';
import {message, Checkbox} from 'antd';
import {login, getCaptcha} from 'util/api';
import loginUtil from 'util/login';
import LoginComponents from './components/Login';

import styles from './style.less';
import md5 from 'util/md5.min.js';

const {UserName, Password, Submit} = LoginComponents;

@withRouter
@inject('loginStore')
@observer
@cssModules(styles)
class LoginPage extends Component {
  constructor(props) {
    super(props);

    this.store = this.props.loginStore;
    this.phoneRef = React.createRef();
  }

  // state = {
  //   autoLogin: true,
  // };
  //
  // changeAutoLogin = e => {
  //   this.setState({
  //     autoLogin: e.target.checked,
  //   });
  // };

  handleSubmit = async (err, values) => {
    if (!err) {
      const res = await login(values.username, values.password);
      if (res.result === 'success') {
        console.log(1311);
        await loginUtil.saveUserInfo(res.data);
        message.success('登录成功');
        console.log(localStorage.getItem('user_info'));
        await this.props.history.push('/mechanism/household');
        console.log(1112);
      } else {
        message.error(res.msg);
      }
    }
  };

  render() {
    return (
      // @TODO <DocumentTitle title={this.getPageTitle()}>
      <div styleName="container">
        <div styleName="content">
          <div styleName="top">
            <div styleName="header">
              <img styleName="logo" src={require('image/login_logo.png')} />
              <img
                styleName="logo-title"
                src={require('image/login_title.png')}
              />
            </div>
          </div>
          <div styleName="login">
            <LoginComponents ref={this.phoneRef} onSubmit={this.handleSubmit}>
              <UserName
                name="username"
                className={styles['username']}
                placeholder="请输入用户名"
                autoComplete="off"
                rules={[
                  {
                    required: true,
                    message: '输入用户名!',
                  },
                ]}
              />
              <Password
                name="password"
                className={styles['password']}
                placeholder="请输入密码"
                autoComplete="off"
                rules={[
                  {
                    required: true,
                    message: '请输入密码!',
                  },
                ]}
              />
              <Submit
                type="primary"
                style={{marginTop: '0 !import'}}
                htmlType="submit">
                登录
              </Submit>
            </LoginComponents>
          </div>
        </div>
      </div>
    );
  }
}

export default LoginPage;
